import { Card, Button } from 'antd-mobile'
import styles from './index.module.css'

export interface HouseItem {
  id: string | number
  title: string
  buildingInfo: string
  area: string
  time: string
  contact: string
  price: string
}

export default function HouseCard({
  item,
  onClick,
}: {
  item: HouseItem
  onClick?: (id: string | number) => void
}) {
  return (
    <Card className={styles['home-card']}>
      <div className={styles['home-card-row']}>
        <div className={styles['home-card-info']}>
          <div className={styles['home-card-title']}>
            {item.title}
            <span className={styles['home-card-title-sub']}>{item.buildingInfo}</span>
          </div>
          <div className={styles['home-card-sub-highlight']}>面积：{item.area}</div>
          <div className={styles['home-card-sub']}>接房时间：{item.time}</div>
          <div className={styles['home-card-sub']}>接房人：{item.contact}</div>
        </div>
        <div className={styles['home-card-aside']}>
          <div>
            <span className={styles['home-card-price']}>{item.price}</span>
            <span className={styles['home-card-price-unit']}>元</span>
            <span className={styles['home-card-price-sub']}>起</span>
          </div>
        </div>
      </div>
      <div className={styles['home-card-btn-wrap']}>
        <Button
          size="mini"
          className={styles['home-card-btn']}
          style={{ fontSize: 10, height: 26, padding: '0 10px', lineHeight: '26px' }}
          onClick={() => onClick?.(item.id)}
        >
          立即审核
        </Button>
      </div>
    </Card>
  )
}
